<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注册功能</title>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<link rel="stylesheet" href="element/theme-chalk/index.css">
		<script src="element/index.js"></script>
	</head>
	<style>

	</style>
	<body>
		<div id="app">
			<el-row type="flex" class="row-bg" justify="center">
				<el-col :span="6">
					<div class="grid-content bg-purple-light">
						<el-form :model="user" status-icon :rules="rules" ref="userForm" label-width="90px"
							class="demo-ruleForm">
							<h3 align="center">调查问卷注册</h3>
							<el-form-item label="用户名" prop="userName">
								<el-input v-model="user.userName" autocomplete="off" placeholder="请输入用户名"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="passWord">
								<el-input type="password" v-model="user.passWord" autocomplete="off"
									placeholder="请输入密码">
								</el-input>
							</el-form-item>
							<el-form-item label="确认密码" prop="pwdConfirm">
								<el-input type="password" v-model="user.pwdConfirm" autocomplete="off"
									placeholder="请再次输入密码">
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm">提交</el-button>
								<el-button @click="resetForm('userForm')">重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-col>
			</el-row>
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data() {
				var validatePass = (rule, value, callback) => {
					if (value === '') {
						callback(new Error('请再次输入密码'));
					} else if (value !== this.user.passWord) {
						callback(new Error('两次输入密码不一致!'));
					} else {
						callback();
					}
				}
				return {
					user: {
						userName: "",
						passWord: "",
						pwdConfirm: ""
					},
					rules: {
						//表单项的prop对应的值
						//每个表单项可能有多个校验规则
						userName: [{
							required: true,
							message: '用户名不能为空',
							//trigger：当前校验操作触发的条件，
							//blur-当输入框失去焦点触发 change-状态、内容发生改变触发
							trigger: 'change'
						}],
						passWord: [{
							required: true,
							message: '密码不能为空',
							//trigger：当前校验操作触发的条件，
							//blur-当输入框失去焦点触发 change-状态、内容发生改变触发
							trigger: 'change'
						}],
						pwdConfirm: [{
							validator: validatePass,
							trigger: 'change'
						}]
					}
				}
			},
			methods: {
				submitForm() {
					let _this = this;
					//先校验，校验通过再提交
					_this.$refs.userForm.validate((valid) => {
						if (!valid) {
							console.log("表单校验未通过");
						} else {
							console.log("表单校验通过");
							console.log("要提交的数据", _this.user)
							axios.post("/users/register", {
								userName: _this.user.userName,
								passWord: _this.user.passWord,
								pwdConfirm: _this.user.pwdConfirm
							}, {
								headers: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								transformRequest: function(data) {
									return Qs.stringify(data);
								}
							}).then(function(res) {
								var data = res.data;
								if (data.success) {
									alert("注册成功")
									location.href = "login.html";
								} else {
									alert(data.errMsg);
								}
							});
						}
					});
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>
